Some image manipulation applications provide functions that allow a user to manipulate an image displayed in a user interface, such as moving, rotating, blurring, or changing the zoom level of the image. An animation of the manipulation can be presented in the user interface to illustrate the process of the manipulation. For instance, if an image manipulation application receives a user input dragging the image along a path to a new position using a mouse, the image manipulation application displays a movement of the image concurrently with the dragging input by rendering the image at various points along the path in the user interface.
However, in some cases, the image manipulation application renders the image at the different points more slowly than the dragging input moves along the path. For instance, if a dragging input moves from a start point to an end point, a rendition of the image at the end point may occur a few second after the dragging input reaches the end point, resulting in a noticeable lag between the dragging input and corresponding image rendition. This problem can be caused by, for example, insufficient computing resources on the computing device executing the image manipulation application, the large file size of the image, the high resolution of the image, the large number of layers in the images, the high complexity of the image operations, and so on.
Existing techniques address this issue by skipping events of the input device and discarding all input device events between two image renditions. As a result, images are rendered selectively in the animation, and discontinuity can be observed in the rendered animation. For instance, if a dragging input passes through at least three points of a path, the image manipulation application may only render the image at the first and third points, causing the image to “jump” between the first and third points rather than being rendering smoothly along the path. Other solutions use a copy of the image at a specific resolution lower than the original resolution of the image during the animation rendering. Although this type of solutions is able to reduce the lag between the rendered image and the position of the input device, the rendered images during the animation are fixed at the specific low resolution even if the computing device is capable of rendering a higher resolution image for certain renditions, resulting in a poor visual quality of the rendered images.